<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <style>
        .layui-progress {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="layui-hide">
    <button class="layui-btn" id="upload0">上传头像</button>
    <button class="layui-btn" id="upload1">上传识别图片1</button>
    <button class="layui-btn" id="upload2">上传识别图片2</button>
    <button class="layui-btn" id="upload3">上传识别图片3</button>
</div>
<br>
<div>
    <div style="float:left;margin-left: 10px">
        <fieldset class="layui-elem-field">
            <legend>头像上传</legend>
            <div class="layui-field-box" align="center">
                <img id="image0" src="/static/images/imageback.jpg" class="layui-icon layui-icon-addition"
                     width="150px" height="150px">
                <div class="layui-progress">
                    <div class="layui-progress-bar" lay-filter="element0" lay-percent="0%"></div>
                </div>
            </div>
        </fieldset>
    </div>
    <div style="float:right;margin-right: 5px">
        <fieldset class="layui-elem-field">
            <legend>识别照片</legend>
            <div class="layui-field-box" align="center">
                <div style="width:150px;float: left;margin-left: 5px">
                    <img id="image1" class="layui-icon layui-icon-addition"
                         th:src="${photo1}"
                         width="150px" height="150px">
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-filter="element1" lay-percent="0%"></div>
                    </div>
                </div>

                <div style=" width:150px;float: left;margin-left: 5px">
                    <img id="image2" class="layui-icon layui-icon-addition"
                         th:src="${photo2}"
                         width="150px" height="150px">
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-filter="element2" lay-percent="0%"></div>
                    </div>
                </div>
                <div style="margin-bottom: 10px; width:150px;float: left;margin-left: 5px">
                    <img id="image3" class="layui-icon layui-icon-addition"
                         th:src="${photo3}"
                         width="150px" height="150px">
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-filter="element3" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    var id;
    var jobNumber;

    //图片回显
    function imageInit(avatar) {
        //头像位置
        if (avatar == null) {
            //默认图片位置
            image0.src = '/static/images/imageback.jpg';
        } else {
            image0.src = avatar;
        }
    }

    layui.use(['form', 'upload', 'element'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.$;
        var element = layui.element;
        var success = 0;    //成功上传图片数量计算
        var url = '/emp/upload';   //上传地址,post上传

        //头像上传
        upload.render({
            elem: '#image0'
            , url: url
            , auto: false //选择文件后不自动上传
            , bindAction: '#upload0' //指向一个按钮触发上传
            , accept: 'images'      //文件效验
            , acceptMime: 'image/jpg,image/jpeg,image/bmp,image/png'
            , data: {id: id}
            , choose: function (obj) {      //选择文件
                obj.preview(function (index, file, result) {
                    var fileName = file.name.substring(file.name.lastIndexOf('.'), file.name.length); // 文件后缀
                    obj.resetFile(index, file, jobNumber + 0 + fileName); //重命名文件名，layui 2.3.0 开始新增
                    image0.src = result;
                });
            },
            before: function (obj) {        //上传前方法
                success++;
            },
            progress: function (n, elem) {  //进度条
                var percent = n + '%'; //获取进度百分比
                element.progress('element0', percent); //可配合 layui 进度条元素使用
            },
            done: function (rwes, index, upload) {  //上传完成后
                success--;
                if (success <= 0) {
                    var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);		//关闭窗口
                    layer.msg("上传成功");
                }
            }
        });

        //第一个图片的上传
        upload.render({
            elem: '#image1'
            , url: url
            , auto: false //选择文件后不自动上传
            , bindAction: '#upload1' //指向一个按钮触发上传
            , accept: 'images'      //文件效验
            , acceptMime: 'image/jpg,image/jpeg,image/bmp,image/png'
            , data: {id: id}
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var fileName = file.name.substring(file.name.lastIndexOf('.'), file.name.length); // 文件后缀
                    obj.resetFile(index, file, jobNumber + 1 + fileName); //重命名文件名，layui 2.3.0 开始新增
                    image1.src = result;
                });
            },
            before: function (obj) {   //上传前方法
                success++;
            },
            progress: function (n, elem) {  //进度条
                var percent = n + '%'; //获取进度百分比
                element.progress('element1', percent); //可配合 layui 进度条元素使用
            },
            done: function (res, index, upload) {  //上传完成后
                success--;
                if (success <= 0) {
                    var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);		//关闭窗口
                    layer.msg("上传成功");
                }
            }
        });

        //第二个图片的上传
        upload.render({
            elem: '#image2'
            , url: url
            , auto: false //选择文件后不自动上传
            , bindAction: '#upload2' //指向一个按钮触发上传
            , accept: 'images'      //文件效验
            , acceptMime: 'image/jpg,image/jpeg,image/bmp,image/png'
            , data: {id: id}
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var fileName = file.name.substring(file.name.lastIndexOf('.'), file.name.length); // 文件后缀
                    obj.resetFile(index, file, jobNumber + 2 + fileName); //重命名文件名，layui 2.3.0 开始新增
                    image2.src = result;
                });
            },
            before: function (obj) {
                success++;
            },
            progress: function (n, elem) {  //进度条
                var percent = n + '%'; //获取进度百分比
                element.progress('element2', percent); //可配合 layui 进度条元素使用
            },
            done: function (res, index, upload) {
                success--;
                if (success <= 0) {
                    var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);		//关闭窗口
                    layer.msg("上传成功");
                }
            }
        });

        //第三个图片的上传
        upload.render({
            elem: '#image3'
            , url: url
            , auto: false //选择文件后不自动上传
            , bindAction: '#upload3' //指向一个按钮触发上传
            , accept: 'images'      //文件效验
            , acceptMime: 'image/jpg,image/jpeg,image/bmp,image/png'
            , data: {id: id}
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var fileName = file.name.substring(file.name.lastIndexOf('.'), file.name.length); // 文件后缀
                    obj.resetFile(index, file, jobNumber + 3 + fileName); //重命名文件名，layui 2.3.0 开始新增
                    image3.src = result;
                });
            },
            before: function (obj) {
                success++;
            },
            progress: function (n, elem) {  //进度条
                var percent = n + '%'; //获取进度百分比
                element.progress('element3', percent); //可配合 layui 进度条元素使用
            },
            done: function (res, index, upload) {
                success--;
                if (success <= 0) {
                    var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);		//关闭窗口
                    layer.msg("上传成功");
                }
            }
        });

    });
</script>
</body>
</html>